<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="cdnload" content="vue,html2canvas,qrcode" />
    <title>028-m海报分享</title>
  </head>
  <style>
    .banner_box {
      width: 100%;
      height: 300px;
      margin: 15px 0;
      text-align: center;
      border-radius: 10px;
      background-color: rgb(73, 167, 44);
    }

    .banner_box img {
      max-width: 100%;
      max-height: 80%;
    }

    .poster_box {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      padding: 15px;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .poster_box .poster_img {
      width: 80%;
    }

    .qrcode_box {
      margin-top: 20px;
    }
  </style>

  <body>
    <div id="imageWrapper" class="banner_box">
      <p>广告位招租(●ˇ∀ˇ●)</p>
      <img src="/assets/img/bg.jpg" />
    </div>
    <div id="app">
      <button @click="toImage">生成海报</button>>
      <div v-show="hasConvertImg" class="poster_box" @click="hasConvertImg = false">
        <img :src="convertImgDataUrl" class="poster_img" alt="" />
        <div class="qrcode_box">
          <div>
            <canvas id="qrcode"></canvas>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./028-main.js"></script>
  </body>
</html>
